---
title: "07-前端本地部署运行（鱼皮代码版） - 用户中心项目教程 - 编程导航教程"
created: 2025-12-02
tags:
  - 项目
aliases:
  - 前端本地部署运行（鱼皮代码版） - 用户中心项目教程 - 编程导航教程
---
# 前端本地部署运行（鱼皮代码版） - 用户中心项目教程 - 编程导航教程

## 必备环境

1、VsCode

> [安装教程](https://developer.aliyun.com/article/1475489) 只需要看到安装中文就可以了

2、Node 16.16.0

> [安装教程](https://www.code-nav.cn/post/1823595688926167041)

3、用户中心前端代码 [链接](https://www.code-nav.cn/course/1790943469757837313/section/1790943873593815041?type=)

## 下载前端需要的依赖

使用 VsCode 打开前端项目

![[3Uvjj4nStrhAgwiE-027627ee.webp]]

打开 **终端**

![[MIl1CGaRyjHTFn9P-ba4b92f6.webp]]

输入命令

```bash
npm install
```

注意：

![[vg7ACwPDkSudJTHP-67a8a336.webp]]

> 执行过程中，**WARN** 都不是报错，不影响后面正常启动前端

安装成功后的效果

![[PeqqSnZY3LVPGuIf-402bd4fb.webp]]

## 运行前端

在 终端 下输入

```bash
npm run start:dev
```

正常效果如图：

只要能正常打开，就成功了！（PS 第一次进入需要加载一会不用担心）

![[meUIzGxQGabW0qse-e05b530d.png]]
![[SKUTxDpZzorNCU55-a02c13e5.webp]]

关闭直接在 终端 下输入 快捷键 Ctrl + C 之后会弹出一个是否确定的提示 输入 y 即可推出

![[Gb4pbtpRLw9FIlCy-58c823e0.png]]

---

所以为什么是这些命令？

答：因为根目录下面的一个叫 package.json 的文件夹里面都有写

```json
{

  "name": "ant-design-pro",

  "version": "5.2.0",

  "private": true,

  "description": "An out-of-box UI solution for enterprise applications",

  "scripts": {

    "analyze": "cross-env ANALYZE=1 umi build",

    "build": "umi build",

    "deploy": "npm run build && npm run gh-pages",

    "dev": "npm run start:dev",

    "gh-pages": "gh-pages -d dist",

    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",

  }

 }
```

## 前端打包

在终端下执行

```text
npm build
```

执行完成之后会在项目根目录，多一个 **dist** 文件，里面的文件全部打包上传到服务器上就可以访问到了

![[EF6zxWHUfN8Xc4G8-7a49307d.webp]]

## 部署

1、使用 宝塔 面板

2、使用原生 Nginx 部署

## 宝塔面板

1、安装 Nginx

![[PipVVN6cFSRrAPuq-69f244a8.webp]]
![[97y5rj5iHe0lJMr4-e8cc37dc.webp]]

2、创建前端项目

![[wPRTLz3Ho3j53Hzn-0cd98a1f.webp]]
![[4mIn2pJ2sagbXZvt-765eaaf3.webp]]

填写服务器的 IP 默认 80 端口不用写，但是如果想要使用其他端口就写成 IP:90。

也可以写域名 比如 xdsx.icu 未写端口默认 80 。

> 比如，你服务器的 IP 是 192.168.1.1 那么你在上面的 **域名** 可以写 192.168.1.1 当然这样写法其实等价于
> 192.168.1.1:80

3、创建之后打开项目的目录

![[9E1qjuuseKZEc3P9-e725b7f6.webp]]
![[qKNoT1EZ4PtKJu4T-4c479c81.webp]]

> 不能删除的文件是 **.user.ini** 正常现象！

让后把 dist 目录的**全部文件**上传到服务器上的这个目录！

![[15psp6BBLo88AKxo-6011d687.webp]]

4、放行对应的端口 80

1）服务器端口（腾讯云演示）

![[kyFPbbZ2RKyvJL3d-af88f4b9.webp]]

2）宝塔端口

![[eBfdP0DzdjIGe7Lf-fef1b9f1.webp]]

5、输入你服务器的 IP （或者你设置到上面 **域名** ）进行访问

![[uczspVkfV8FeY3yE-9c5fec09.webp]]

6、访问成功！！！

🤩🤩🤩

## 原生服务器部署

首先需要安装 Nginx 教程：<https://www.code-nav.cn/post/1824822454893486081>

上传工具：[winscp](https://winscp.net/eng/index.php) 或者其他的能上传到服务器文件的工具都可以（当然也可以
rz 命令上传）

1、先切换到工作目录

```text
cd ~
```

2、创建一个文件夹

```bash
mkdir -p project/fronted
```

3、查看 nginx 的配置文件的位置

![[99nojQzMSn9rnbyA-8a5420be.png]]

4、修改配置文件

```text
vi /usr/local/nginx/conf/nginx.conf
```

配置文件

```nginx
#user  nobody;

worker_processes  1;

#error_log  logs/error.log;

#error_log  logs/error.log  notice;

#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

    #                  '$status $body_bytes_sent "$http_referer" '

    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;

    #tcp_nopush     on;

    #keepalive_timeout  0;

    keepalive_timeout  65;

    # 开启之后访问速度会变快

    #gzip  on;

    server {

        listen       前端运行端口;

        server_name  localhost;

		root 前端项目地址;

        location / {

            index  index.html index.htm;

            try_files $uri $uri/ /index.html;

        }

    }

}
```

5、更新 nginx 配置文件

```text
nginx -s reload
```

6、放行服务器端口 80

## Bug

![[AHw9EpoyIHIfmMcn-576cbea9.webp]]

按照上述流程走完之后发现报错 2024/08/21 16:39:25 [crit] 7653#0: \*830 stat() "/root/project/fronted/index.html"
failed (13: Permission denied), client: 42.100.136.105, server

解决方法

修改配置文件顶部的 user 选项，然后重新启动即可 `nginx -s reload`

```java
user root;
```

---

**项目分区导航**：⬅️ [[06-初始化|06-初始化]] | 07-前端本地部署运行（鱼皮代码版） - 用户中心项目教程 - 编程导航教程 | ➡️ [[08-后端本地部署运行|08-后端本地部署运行]]